<!-- 订单列表 -->
<template>
  <div id="app">
    <top-header></top-header>
    <el-table :data="orderListData" border  align="center"stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="店铺名称">
              <span>{{props.row.restaurant_name }}</span>
              <!-- <img :src="{{props.row.restaurant_image_url}}" alt="" srcset=""> -->
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.basket.group[0][0].name}}</span>
            </el-form-item>
            <el-form-item label="商品数量">
              <span>{{ props.row.basket.group[0][0].quantity}}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.basket.group[0][0].price*props.row.basket.group[0][0].quantity}}￥</span>
            </el-form-item>

            <el-form-item label="配送费">
              <span>{{ props.row.basket.deliver_fee.price }}￥</span>
            </el-form-item>
            <el-form-item label="打包费">
              <span>{{ props.row.basket.packing_fee.price}}￥</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column label="商品 ID" prop="id" align="center"> </el-table-column>
      <el-table-column label="总价格" prop="total_amount" align="center"> </el-table-column>
      <el-table-column label="订单状态" prop="status_bar.title" align="center"> </el-table-column>
    </el-table>
    <div class="block">
  <span>共{{total}}条</span>
    <el-pagination 
    small
    layout="prev, pager, next,jumper" 
    :page-size="5"
     :total="total"
     @current-change="currentChange"
     
     >
   <!-- @size-change="sizeChange" -->
     </el-pagination>
    </div>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TopHeader from "./top-header";
import {getOrderList,getAllOrders} from "@/api/api";
export default {
    name:"App",
  //import引入的组件需要注入到对象中才能使用
  components: {
    "top-header": TopHeader,
  },
  data() {
    //这里存放数据
    // pageSize:tableData.length,
    return {
      orderListData:[],
        pageSize:5,
        //  limit:pageSize,
        offset:0,
        total:0,
    /*   tableData: [
        {
          id: "12987122",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "12987123",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
        {
          id: "0987125",
          name: "幸福西饼",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
        {
          id: "12987126",
          name: "好滋好味鸡蛋仔",
          category: "江浙小吃、小吃零食",
          desc: "荷兰优质淡奶，奶香浓而不腻",
          address: "上海市普陀区真北路",
          shop: "王小虎夫妻店",
          shopId: "10333",
        },
         {
          id: "0987125",
          name: "广式烧腊",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
         {
          id: "0987125",
          name: "幸福西饼",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
         {
          id: "0987125",
          name: "幸福西饼",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
         {
          id: "0987125",
          name: "幸福西饼",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
         {
          id: "0987125",
          name: "幸福西饼",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
         {
          id: "0987125",
          name: "幸福西饼",
          category: "甜食",
          desc: "优质材料",
          address: "广东省深圳市宝安区",
          shop: "幸福西饼一航城店",
          shopId: "10333",
        },
      ], */


    };
  },
  //监听属性 类似于data概念
  computed: {
      
      //过滤数据
      // filterData:function(){
      //     let filterData = this.tableData.slice(
      //         (this.pageNum-1)*this.pageSize,
      //         this.pageNum*this.pageSize
      //     )
      //     return filterData;
      // }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
      currentChange:function(currentPage){
          console.log(currentPage)
          //currentPage为当前页
          // this.pageNum = pageNum;
          this.getOrderListData({
            //页面改变
            pageNum:currentPage
          });
      },
      // sizeChange:function(pageSize){
      //     console.log(pageSize)
      //     this.pageSize = pageSize;
      // },
      //获取用户列表的数据 
      getOrderListData:async function(params){
        //返回了一个promise
        let res =await getOrderList({
          //一次性请求的条数
          limit:this.pageSize,
          offset:(params.pageNum-1)*this.pageSize
        });
        this.orderListData = res;
        
        console.log(res)
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
 async created() {
   //生命周期开始调用 getOrderListData获取用户列表的数据 
   //初始化当前页为第一页
    this.getOrderListData({
      pageNum:1,
    });
    let res_total = await getAllOrders();
    console.log(res_total.count)
    this.total = res_total.count;
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
   /*   */
   /*  getOrderList().then(res=>{
            console.log(res)
          }) */
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
.block span{
    display: block;
    float: right;
    font-size: 13px;
    color: #606266;
    line-height: 24px;
    margin-right: 60px;
}
.order-list-pagination{
  
    margin-right: 55px;
}
</style>